<template>
    <div class="home">
        <dv-full-screen-container>
            <div style="display: flex;justify-content: space-between;">
                <dv-decoration-8 style="width:30%;height:6vh;" />
                <div class="title" style="width:45%;">智慧殡葬调度中心 <span class="title-span">{{ nowDate }}</span></div>
                <dv-decoration-8 :reverse="true" style="width:30%;height:6vh;" />
            </div>
            
            <div style="height: 60vh;box-sizing: border-box;padding: 0.5vh 0.5vw;display: flex;justify-content: space-between;">
                <!-- 最左侧边框 -->
                <div style="box-sizing: border-box;width:30%; height: 100%;">
                    <dv-border-box-12 style="width:100%;height:50%">
                        <div class="tip">
                            <div>车辆调度</div>
                        </div>
                        <dv-capsule-chart :config="config1" style="height:75%;box-sizing: border-box;padding: 0 1vw;" />
                    </dv-border-box-12>
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 50%">
                        <div class="tip">
                            <div>服务特殊人员次数</div>
                        </div>
                        <dv-capsule-chart :config="config7" style="height:75%;box-sizing: border-box;padding: 0 1vw;" />

                        <!-- <div class="by-bzc-tj" style="height: 80%; ">
                            <div class="by-bzc-tj-border by-bzc-tj-border-color-1">
                                <div>{{bzc[0].name}}</div>
                                <div>{{bzc[0].value}}次</div>
                            </div>
                            <div class="by-bzc-tj-border  by-bzc-tj-border-color-2">
                                <div>{{bzc[1].name}}</div>
                                <div>{{bzc[1].value}}次</div>
                            </div>
                            <div class="by-bzc-tj-border  by-bzc-tj-border-color-3">
                                <div>{{bzc[2].name}}</div>
                                <div>{{bzc[2].value}}次</div>
                            </div>
                            <div class="by-bzc-tj-border  by-bzc-tj-border-color-4">
                                <div>{{bzc[3].name}}</div>
                                <div>{{bzc[3].value}}次</div>
                            </div>
                        </div> -->
                    </dv-border-box-12>
                </div>

                <!-- 中间边框 -->
                <div style="box-sizing: border-box;width:40%; height: 100%;  padding: 0 10px;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height:100%;">
                        <div class="tip">
                            <div>车辆GPS</div>
                            <!-- <div class="common-margin">运行：{{gpsyx}}</div>
                            <div class="common-margin">停止：{{gpsjz}}</div>
                            <div class="common-margin">离线：{{gpslx}}</div> -->
                        </div>
                        <div class="map-box">
                            <div id="mapDiv" class="mapClass"></div>
                        </div>
                    </dv-border-box-12>
                </div>
                
                
                <!-- 最右侧边框 -->
                <div style="box-sizing: border-box;width:30%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 40%">
                        <div class="tip">
                            <div>月接单数量</div>
                        </div>
                        <dv-charts :option="option4" style="height: 80%;" />
                    </dv-border-box-12>
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 60%;">
                        <div class="tip">
                            <div>合作机构/单位</div>
                        </div>
                        <!-- <dv-charts :option="option1" style="height: 80%;" /> -->
                        <dv-scroll-board :config="config6" style="height:80%;box-sizing: border-box;padding: 0 1vw;"/>
                    </dv-border-box-12>
                </div>
            </div>
            <div style="height: 34vh;box-sizing: border-box;padding: 0.5vh 0.5vw;display: flex;justify-content: space-between;">
                <div style="box-sizing: border-box;width:30%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 100%">
                        <div class="tip">
                            <div>数据占比</div>
                        </div>
                        <div class="swtj-byfwtj" style="height: 85%;">
                            <div>
                                <div style="color: rgb(105, 207, 168);">数据来源占比</div>
                                <!-- <dv-active-ring-chart :config="config5" style="width:100%;height:85%" /> -->
                                <dv-charts :option="option6" style="width:100%;height:85%" />
                            </div>
                            <!-- <div>
                                <div style="color: rgb(105, 207, 168);">年龄分布占比</div>
                                <dv-active-ring-chart :config="config3" style="width:100%;height:85%" />
                                <dv-charts :option="option5" style="width:100%;height:85%" />
                            </div> -->
                            <div>
                                <div style="color: rgb(105, 207, 168);">性别占比</div>
                                <!-- <dv-active-ring-chart :config="config4" style="width:100%;height:85%" /> -->
                                <dv-charts :option="option7" style="width:100%;height:85%" />
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
                <div style="box-sizing: border-box;width:40%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 100%">
                        <div class="tip">
                            <div>订单信息</div>
                        </div>
                        <dv-scroll-board :config="config9" style="height:75%;box-sizing: border-box;padding: 0 1vw;"/>
                    </dv-border-box-12>
                </div>
                <div style="box-sizing: border-box;width:30%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 100%">
                        <div class="tip">
                            <div>订单类型统计</div>
                        </div>
                        <!-- <div class="by-yt-qk">
                            <div class="by-yt-qk-text-1" style="height: 10%;">订单类型统计</div>
                        </div> -->
                        <!-- <dv-active-ring-chart :config="config2" style="width:100%;height:85%" /> -->
                        <dv-charts :option="option3" style="width:100%;height:85%" />

                    </dv-border-box-12>
                </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>

<script lang="ts" setup >
    import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount, onBeforeUnmount } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { getLiveOrderInfoApi, getSpecialOrderInfoApi, getSourceTypeInfoApi, getMonthOrderInfoApi, partnersApi, getCarByAddressApi, getOrderSourceTypeApi, getExecutingOrderListApi } from '@/apis'

    import { useRoute } from 'vue-router'
    const route = useRoute()

    const nowDate: Ref<string> = ref('')
    const map: Ref<any> = ref('')
    const option1: Ref<any> = ref({
        // title: {
        //     text: '业务月度趋势',
        //     style: {
        //         fill: '#fff',
        //         fontSize: 17,
        //         fontWeight: 'bold',
        //         textAlign: 'center',
        //         textBaseline: 'bottom'
        //     }
        // },
        legend: {
            // data: ['今年', '去年'],
            textStyle: {
                fontFamily: 'Arial',
                fontSize: 13,
                fill: '#fff',
            },
            textUnselectedStyle: {
                fontFamily: 'Arial',
                fontSize: 13,
                fill: '#999'
            },
            data: [
                {
                    name: '接单数',
                    color: 'rgb(55, 162, 218, 1)',
                },
                {
                    name: '公里数',
                    color: '#f999e0'
                },
                // {
                //     name: '金额',
                //     color: '#fb6a2c'
                // },
            ]
        },
        xAxis: {
            name: '',
            axisLabel: {
                style: {
                    fill: '#fff',
                    fontSize: 10,
                    rotate: 0
                }
            },
            nameTextStyle: {
                fill: '#fff',
                fontSize: 10
            },
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            // 边界间隙
            // boundaryGap: false
        },
        yAxis: {
            name: '值',
            min: 0,
            data: 'value',
            nameTextStyle: {
                fill: '#fff',
                fontSize: 10
            },
            axisLabel: {
                style: {
                    fill: '#fff',
                    fontSize: 10,
                    rotate: 0
                }
            },
        },
        series: [
            {
                name: '接单数',
                data: [10, 30, 70, 20, 0, 40, 10, 30, 70, 20, 0, 40],
                type: 'bar',
                // type: 'line',
                stack: 'a',
                gradient: {
                    color: ['#37a2da', '#67e0e3']
                },
                label: {
                    show: false,
                    // position: 'center',
                    offset: [0, -10],
                    style: {
                    fill: '#fff'
                    }
                },
                lineArea: {
                    show: true,
                    gradient: ['rgba(55, 162, 218, 1)', 'rgba(55, 162, 218, 0)']
                },
                lineStyle: {
                    lineDash: [5, 5]
                }
            },
            {
                name: '公里数',
                data: [20, 40, 80, 90, 10, 50, 20, 40, 80, 30, 10, 50],
                type: 'bar',
                // type: 'line',
                stack: 'b',
                gradient: {
                    color: ['#f999e0', '#e8a7d7']
                },
                label: {
                    show: false,
                    // position: 'center',
                    offset: [0, -10],
                    style: {
                    fill: '#fff'
                    }
                },
                lineArea: {
                    show: true,
                    gradient: ['rgba(55, 162, 218, 1)', 'rgba(55, 162, 218, 0)']
                },
                lineStyle: {
                    lineDash: [5, 5]
                }
            },
            // {
            //     name: '金额',
            //     data: [20, 40, 80, 90, 10, 50, 20, 40, 80, 30, 10, 50],
            //     type: 'bar',
            //     // type: 'line',
            //     stack: 'c',
            //     gradient: {
            //         color: ['#fb6a2c', '#f18050']
            //     },
            //     label: {
            //         show: true,
            //         // position: 'center',
            //         offset: [0, -10],
            //         style: {
            //         fill: '#fff'
            //         }
            //     },
            //     lineArea: {
            //         show: true,
            //         gradient: ['rgba(55, 162, 218, 1)', 'rgba(55, 162, 218, 0)']
            //     },
            //     lineStyle: {
            //         lineDash: [5, 5]
            //     }
            // }
        ]
    })
    const option3: Ref<any> = ref({
        // title: {
        //     text: '业务比例',
        //     style: {
        //         fill: '#fff',
        //         fontSize: 17,
        //         fontWeight: 'bold',
        //         textAlign: 'center',
        //         textBaseline: 'bottom'
        //     }
        // },
        series: [
            {
                type: 'gauge',
                // name: 'aaaaaaaaa',
                data: [
                    // { name: '油箱B', value: 78, radius: '40%' },
                    {
                        name: '',
                        value: 0
                    },
                    {
                        name: '预约',
                        value: 4,
                        radius: '40%'
                    },
                    {
                        name: '即刻',
                        value: 94,
                        radius: '20%'
                    }
                ],
                // startAngle: -Math.PI / 2,
                // endAngle: Math.PI * 1.5,
                // arcLineWidth: 10,
                radius: ['90%'], //仪表盘半径
                // center: ['50%', '55%'], //仪表盘中心点
                axisLabel: { //坐标标签配置项
                    show: true,
                    formatter: '{value}%', //坐标标签内容格式
                    style: {
                        fill: '#fff'
                    }
                },
                pointer: { //仪表盘指针配置项
                    show: true,
                    valueIndex: 0, //指针从data中获取值的索引
                    style: {
                        scale: [.6, .6] //可以调节scale的值放大缩小指针
                    }
                },
                axisTick: { //坐标刻度配置项
                    show: true,
                    style: { //刻度线样式
                        stroke: '#fff'
                    }
                },
                details: { //Data子元素构成的圆弧的详情的配置项
                    show: true,
                    formatter: '{name}:{value}%', //详情内容格式化 {name}剩余{value}%
                    position: 'start', //详情位置
                    offset: [10, 0], //详情内容位置偏移量
                    style: { //详情样式
                        fontSize: 10,
                        textAlign: 'left'
                    }
                },
                // animationCurve: 'easeInOutBack', //仪表盘缓动曲线
            }
        ]
    })
    const option4: Ref<any> = ref({
        // title: {
        //     text: '业务月度趋势',
        //     style: {
        //         fill: '#fff',
        //         fontSize: 17,
        //         fontWeight: 'bold',
        //         textAlign: 'center',
        //         textBaseline: 'bottom'
        //     }
        // },
        legend: {
            // data: ['今年', '去年'],
            textStyle: {
                fontFamily: 'Arial',
                fontSize: 13,
                fill: '#fff',
            },
            textUnselectedStyle: {
                fontFamily: 'Arial',
                fontSize: 13,
                fill: '#999'
            },
            data: [
                {
                    name: '月份',
                    color: 'rgb(55, 162, 218, 1)',
                },
                // {
                //     name: '去年',
                //     color: '#fff'
                // },
                // {
                //     name: '早退',
                //     color: 'rgb(174, 102, 174)'
                // },
                // {
                //     name: '旷工',
                //     color: 'rgb(251, 106, 44)'
                // },
            ]
        },
        xAxis: {
            name: '月',
            axisLabel: {
                style: {
                    fill: '#fff',
                    fontSize: 10,
                    rotate: 0
                }
            },
            nameTextStyle: {
                fill: '#fff',
                fontSize: 10
            },
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            // 边界间隙
            boundaryGap: false
        },
        yAxis: {
            name: '数量',
            data: 'value',
            max: 1000,
            min: 0,
            nameTextStyle: {
                fill: '#fff',
                fontSize: 10
            },
            axisLabel: {
                style: {
                    fill: '#fff',
                    fontSize: 10,
                    rotate: 0
                }
            },
        },
        series: [
            {
                name: '月份',
                data: [10, 30, 70, 20, 0, 40, 10, 30, 70, 20, 0, 40],
                // type: 'bar',
                type: 'line',
                stack: 'a',
                gradient: {
                    color: ['#37a2da', '#67e0e3']
                },
                label: {
                    show: true,
                    // position: 'center',
                    offset: [0, -10],
                    style: {
                    fill: '#fff'
                    }
                },
                lineArea: {
                    show: true,
                    gradient: ['rgba(55, 162, 218, 1)', 'rgba(55, 162, 218, 0)']
                },
                lineStyle: {
                    lineDash: [5, 5]
                }
            }
        ]
    })
    const option5: Ref<any> = ref({
        // title: {
        //     text: '业务比例',
        //     style: {
        //         fill: '#fff',
        //         fontSize: 17,
        //         fontWeight: 'bold',
        //         textAlign: 'center',
        //         textBaseline: 'bottom'
        //     }
        // },
        series: [
            {
                type: 'gauge',
                // name: 'aaaaaaaaa',
                data: [
                    // { name: '油箱B', value: 78, radius: '40%' },
                    {
                        name: '',
                        value: 0
                    }
                ],
                // startAngle: -Math.PI / 2,
                // endAngle: Math.PI * 1.5,
                // arcLineWidth: 10,
                radius: ['85%'], //仪表盘半径
                // center: ['50%', '55%'], //仪表盘中心点
                axisLabel: { //坐标标签配置项
                    show: true,
                    formatter: '{value}%', //坐标标签内容格式
                    style: {
                        fill: '#fff'
                    }
                },
                pointer: { //仪表盘指针配置项
                    show: true,
                    valueIndex: 0, //指针从data中获取值的索引
                    style: {
                        scale: [.1, .1] //可以调节scale的值放大缩小指针
                    }
                },
                axisTick: { //坐标刻度配置项
                    show: true,
                    style: { //刻度线样式
                        stroke: '#fff'
                    }
                },
                details: { //Data子元素构成的圆弧的详情的配置项
                    show: true,
                    formatter: '{name}:{value}%', //详情内容格式化 {name}剩余{value}%
                    position: 'start', //详情位置
                    offset: [10, 0], //详情内容位置偏移量
                    style: { //详情样式
                        fontSize: 10,
                        textAlign: 'left'
                    }
                },
                // animationCurve: 'easeInOutBack', //仪表盘缓动曲线
            }
        ]
    })
    const option6: Ref<any> = ref({
        // title: {
        //     text: '业务比例',
        //     style: {
        //         fill: '#fff',
        //         fontSize: 17,
        //         fontWeight: 'bold',
        //         textAlign: 'center',
        //         textBaseline: 'bottom'
        //     }
        // },
        series: [
            {
                type: 'gauge',
                // name: 'aaaaaaaaa',
                data: [
                    // { name: '油箱B', value: 78, radius: '40%' },
                    {
                        name: '',
                        value: 0
                    }
                ],
                // startAngle: -Math.PI / 2,
                // endAngle: Math.PI * 1.5,
                // arcLineWidth: 10,
                radius: ['95%'], //仪表盘半径
                // center: ['50%', '55%'], //仪表盘中心点
                axisLabel: { //坐标标签配置项
                    show: true,
                    formatter: '{value}%', //坐标标签内容格式
                    style: {
                        fill: '#fff'
                    }
                },
                pointer: { //仪表盘指针配置项
                    show: true,
                    valueIndex: 0, //指针从data中获取值的索引
                    style: {
                        scale: [.5, .5] //可以调节scale的值放大缩小指针
                    }
                },
                axisTick: { //坐标刻度配置项
                    show: true,
                    style: { //刻度线样式
                        stroke: '#fff'
                    }
                },
                details: { //Data子元素构成的圆弧的详情的配置项
                    show: true,
                    formatter: '{name}:{value}%', //详情内容格式化 {name}剩余{value}%
                    position: 'start', //详情位置
                    offset: [10, 0], //详情内容位置偏移量
                    style: { //详情样式
                        fontSize: 10,
                        textAlign: 'left'
                    }
                },
                // animationCurve: 'easeInOutBack', //仪表盘缓动曲线
            }
        ]
    })
    const option7: Ref<any> = ref({
        // title: {
        //     text: '业务比例',
        //     style: {
        //         fill: '#fff',
        //         fontSize: 17,
        //         fontWeight: 'bold',
        //         textAlign: 'center',
        //         textBaseline: 'bottom'
        //     }
        // },
        series: [
            {
                type: 'gauge',
                // name: 'aaaaaaaaa',
                data: [
                    // { name: '油箱B', value: 78, radius: '40%' },
                    {
                        name: '',
                        value: 0
                    }
                ],
                // startAngle: -Math.PI / 2,
                // endAngle: Math.PI * 1.5,
                // arcLineWidth: 10,
                radius: ['95%'], //仪表盘半径
                // center: ['50%', '55%'], //仪表盘中心点
                axisLabel: { //坐标标签配置项
                    show: true,
                    formatter: '{value}%', //坐标标签内容格式
                    style: {
                        fill: '#fff'
                    }
                },
                pointer: { //仪表盘指针配置项
                    show: true,
                    valueIndex: 0, //指针从data中获取值的索引
                    style: {
                        scale: [.8, .8] //可以调节scale的值放大缩小指针
                    }
                },
                axisTick: { //坐标刻度配置项
                    show: true,
                    style: { //刻度线样式
                        stroke: '#fff'
                    }
                },
                details: { //Data子元素构成的圆弧的详情的配置项
                    show: true,
                    formatter: '{name}:{value}%', //详情内容格式化 {name}剩余{value}%
                    position: 'start', //详情位置
                    offset: [10, 0], //详情内容位置偏移量
                    style: { //详情样式
                        fontSize: 10,
                        textAlign: 'left'
                    }
                },
                // animationCurve: 'easeInOutBack', //仪表盘缓动曲线
            }
        ]
    })
    const config1: Ref<any> = ref({
        data: [
            {
                name: '驶向现场',
                value: 0
            },
            {
                name: '到达现场',
                value: 0
            },
            {
                name: '转运中',
                value: 0
            },
            {
                name: '已完成',
                value: 0
            },
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '数量',
        showValue: true
    })
    const config3: Ref<any> = ref({
        data: [
            {
                name: '',
                value: 0
            },
        ],
        lineWidth: 20, //线条粗细
        digitalFlopStyle: { //数字翻牌器的文字颜色和大小
            fontSize: 15,
            fill: '#fff'
        }
    })
    const config4: Ref<any> = ref({
        data: [
            {
                name: '',
                value: 0
            },
        ],
        lineWidth: 20, //线条粗细
        digitalFlopStyle: { //数字翻牌器的文字颜色和大小
            fontSize: 15,
            fill: '#fff'
        }
    })
    const config2: Ref<any> = ref({
        data: [
            {
                name: '',
                value: 0
            },
        ],
        lineWidth: 20, //线条粗细
        digitalFlopStyle: { //数字翻牌器的文字颜色和大小
            fontSize: 15,
            fill: '#fff'
        }
    })
    const config5: Ref<any> = ref({
        data: [
            {
                name: '',
                value: 0
            },
        ],
        lineWidth: 20, //线条粗细
        digitalFlopStyle: { //数字翻牌器的文字颜色和大小
            fontSize: 15,
            fill: '#fff'
        }
    })
    const config6: Ref<any> = ref({
        // header: ['合作机构/单位'],
        data: [
        ],
        rowNum: 5,
        // index: true,
        // columnWidth: [130, 130, 130],
        align: ['center', 'center', 'center'],
        headerBGC: 'rgba(47, 98, 151, 0.5)',
        // oddRowBGC: '#505458',
        // oddRowBGC: '#003B51',
        oddRowBGC: 'rgba(0, 59, 81, 0.5)',
        // evenRowBGC: '#222b34',
        evenRowBGC: 'rgba(34, 43, 52, 0.5)',
    })
    const config7: Ref<any> = ref({
        data: [
            {
                name: '驶向现场',
                value: 0
            },
            {
                name: '到达现场',
                value: 0
            },
            {
                name: '转运中',
                value: 0
            },
            {
                name: '已完成',
                value: 0
            },
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '数量',
        showValue: true
    })
    const config9: Ref<any> = ref({
        header: ['姓名', '地址', '时间'],
        data: [
        ],
        rowNum: 5,
        // index: true,
        columnWidth: [200, 350],
        align: ['center', 'center', 'center'],
        headerBGC: 'rgba(47, 98, 151, 0.5)',
        // oddRowBGC: '#505458',
        // oddRowBGC: '#003B51',
        oddRowBGC: 'rgba(0, 59, 81, 0.5)',
        // evenRowBGC: '#222b34',
        evenRowBGC: 'rgba(34, 43, 52, 0.5)',
    })
    const gpsyx: Ref<string> = ref('')
    const gpsjz: Ref<string> = ref('')
    const gpslx: Ref<string> = ref('')
    const timer: Ref<number> = ref()
    const bzc: Ref<Array<any>> = ref([
        {
            name: '现（退）役军人',
            value: '0'
        },
        {
            name: '三属人员及其家属八一优待',
            value: '0'
        },
        {
            name: '医务人员及其家属',
            value: '0'
        },
        {
            name: '特殊人员优惠',
            value: '0'
        },
        {
            name: '遗体接送车',
            value: '0'
        },
        {
            name: '配送车',
            value: '0'
        },
    ])
    onBeforeMount(() => {
        nowDate.value = new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, 0) + '-' + new Date().getDate().toString().padStart(2, 0) + ' ' + new Date().getHours().toString().padStart(2, 0) + ':' + new Date().getMinutes().toString().padStart(2, 0) + ':' + new Date().getSeconds().toString().padStart(2, 0)
        timer.value = setInterval(() => {
            nowDate.value = new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, 0) + '-' + new Date().getDate().toString().padStart(2, 0) + ' ' + new Date().getHours().toString().padStart(2, 0) + ':' + new Date().getMinutes().toString().padStart(2, 0) + ':' + new Date().getSeconds().toString().padStart(2, 0)
        }, 1000)
        getLiveOrderInfo();
        getSpecialOrderInfo();
        getSourceTypeInfo()
        getMonthOrderInfo();
        partners();


        getExecutingOrderList();
        getOrderSourceType();
        
        timer.value = setInterval(() => {
            getLiveOrderInfo();
            getSpecialOrderInfo();
            getSourceTypeInfo()
            getMonthOrderInfo();
            partners();


            getCarByAddress()
            getExecutingOrderList();
            getOrderSourceType();

        }, 1000*60)
    })
    onMounted(() => {
        //地图
        getCarByAddress()
    })
    onBeforeUnmount(() => {
        clearInterval(timer.value)
    })

    const getLiveOrderInfo = () => {
        getLiveOrderInfoApi().then(res => {
            config1.value.data = res.data;
            config1.value = {...config1.value}
        });
    }
    const getSpecialOrderInfo = () => {
        getSpecialOrderInfoApi().then(res => {
            // bzc.value = res.data
            config7.value.data = res.data;
            config7.value = {...config7.value}
        });
    }
    const getSourceTypeInfo = () => {
        getSourceTypeInfoApi().then(res => {
            // config3.value.data = res.data.ages;
            // config3.value = {...config3.value}
            // config5.value.data = res.data.sources;
            // config5.value = {...config5.value}
            // config4.value.data = res.data.genders;
            // config4.value = {...config4.value}
            let vaCount1 = 0
            res.data.ages.forEach((item, index) => {
                vaCount1 += Number(item.value)
            })
            res.data.ages.forEach((item, index) => {
                item.value = Number(item.value) / vaCount1 * 100
                if (index == 0) {
                    item.radius = '85%'
                }
                if (index == 1) {
                    item.radius = '60%'
                }
                if (index == 2) {
                    item.radius = '30%'
                }
                if (index == 3) {
                    item.radius = '10%'
                }
            })
            option5.value.series[0].data = res.data.ages;
            option5.value = {...option5.value}

            let vaCount2 = 0
            res.data.sources.forEach((item, index) => {
                vaCount2 += Number(item.value)
            })
            res.data.sources.forEach((item, index) => {
                item.value = Number(item.value) / vaCount2 * 100
                if (index == 0) {
                    item.radius = '95%'
                }
                if (index == 1) {
                    item.radius = '55%'
                }
                if (index == 2) {
                    item.radius = '30%'
                }
                if (index == 3) {
                    item.radius = '10%'
                }
            })
            option6.value.series[0].data = res.data.sources;
            // 数据写死先
            option6.value.series[0].data = [
                {
                    name: '热线',
                    value: 44,
                    radius: '95%'

                },
                {
                    name: '第三方',
                    value: 27,
                    radius: '50%'
                },
                {
                    name: '微信小程序',
                    value: 29,
                    radius: '30%'
                }
            ];
            option6.value = {...option6.value}

            let vaCount3 = 0
            res.data.genders.forEach((item, index) => {
                vaCount3 += Number(item.value)
            })
            res.data.genders.forEach((item, index) => {
                item.value = Number(item.value) / vaCount3 * 100
                if (index == 0) {
                    item.radius = '95%'
                }
                if (index == 1) {
                    item.radius = '55%'
                }
                if (index == 2) {
                    item.radius = '30%'
                }
                if (index == 3) {
                    item.radius = '10%'
                }
            })
            option7.value.series[0].data = res.data.genders;
            // 数据写死先
            option7.value.series[0].data = [
                {
                    name: '男',
                    value: 66,
                    radius: '95%'

                },
                {
                    name: '女',
                    value: 34,
                    radius: '45%'
                }
            ];
            option7.value = {...option7.value}
        });
    }


    const getCarByAddress = () => {
        getCarByAddressApi({}).then((res) => {
            // clxx      //车辆状态
            // cph      //车牌号
            // lat       //纬度
            // lng      //经度
            // lx        //离线
            // jz        //静止
            // yx       //运行
            console.log(res)
            // gpsyx.value = res.gpsyx
            // gpsjz.value = res.gpsjz
            // gpslx.value = res.gpslx
            setTimeout(() => {
                mapInit(res)
            }, 1000);
        })
    }
    const getExecutingOrderList = () => {
        config9.value.data = []
        getExecutingOrderListApi().then(res => {
            res.data.forEach((item, index) => {
                config9.value.data.push([item.zo_ex2, item.zo_ex41, item.zo_dat1.slice(0,-2)])
            })
        })
    }
    const partners = () => {
        config6.value.data = []

        partnersApi().then(res => {
            // option1.value.xAxis.data = []
            // option1.value.series[0].data = []
            // option1.value.series[1].data = []
            // // option1.value.series[2].data = []
            // res.data.forEach((item, index) => {
            //     option1.value.xAxis.data.push(item.area)
            //     option1.value.series[0].data.push(item.count)
            //     option1.value.series[1].data.push(item.kilometers)
            //     // option1.value.series[2].data.push(item.moneys)
            // })
            res.data.forEach((item, index) => {
                config6.value.data.push([item])
            })
        })

    }
    const getMonthOrderInfo = () => {
        getMonthOrderInfoApi().then(res => {
            option4.value.xAxis.data = []
            option4.value.series[0].data = []
            res.data.forEach((item, index) => {
                option4.value.xAxis.data.push(item.name)
                option4.value.series[0].data.push(item.value)
            })
            // 数据写死先
            option4.value.series[0].data = [512, 733, 625, 933, 826, 754, 697]

        })

    }
    const getOrderSourceType = () => {
        getOrderSourceTypeApi().then(res => {
            let vaCount = 0
            res.data.forEach((item, index) => {
                vaCount += Number(item.value)
            })
            console.log(vaCount)
            res.data.forEach((item, index) => {
                item.value = Number(item.value) / vaCount * 100
                if (index == 0) {
                    // item.radius = '95%'
                }
                if (index == 1) {
                    item.radius = '60%'
                }
                if (index == 2) {
                    item.radius = '30%'
                }
                
            })
            option3.value.series[0].data = res.data;
            // 数据写死先
            option3.value.series[0].data = [
                {
                    name: '预约',
                    value: 62,
                },
                {
                    name: '即刻',
                    value: 38,
                    radius: '35%'
                }
            ];
            option3.value = {...option3.value}
            console.log(option3.value)
         });
    }
    
    
    const mapInit = (contentObj) => {
        if (!map.value) {
                //缩放级别
                let zoom = 9;
                //初始化地图对象
                map.value = new T.Map('mapDiv');

                //设置显示地图的中心点和级别
                // map.value.centerAndZoom(new T.LngLat(120.848222,29.562186), zoom);
                map.value.centerAndZoom(new T.LngLat(contentObj.lng, contentObj.lat), zoom);
            }

            // //创建标注对象
            // let marker = new T.Marker(new T.LngLat(116.411794, 39.9068));
            // //向地图上添加标注
            // map.addOverLay(marker);

            // let infoWin1 = new T.InfoWindow();
            // let sContent =
            //     "<div>电话 : (010)88187700 <br>地址：北京市顺义区机场东路国门商务区地理信息产业园2号楼天地图大厦" +
            //     "</div>";
            // infoWin1.setContent(sContent);
            // marker.addEventListener("click", function () {
            //     marker.openInfoWindow(infoWin1);
            // });// 将标注添加到地图中

            // let contentObj = [
            //     {
            //         gcm_ex11: 119.928421,
            //         gcm_ex12: 32.46165,
            //         gcm_ex1: '公墓名称1',
            //         gcm_ex4: '电话',
            //         gcm_ex2: '公墓地址',
            //         gcm_ex29: '总墓穴数',
            //         gcm_ex30: '已售墓穴数',
            //         gcm_ex31: '可售墓穴数',
            //         gcm_ex3: '联系人',
            //     },
            //     {
            //         gcm_ex11: 119.828421,
            //         gcm_ex12: 32.46165,
            //         gcm_ex1: '公墓名称2',
            //         gcm_ex4: '电话',
            //         gcm_ex2: '公墓地址',
            //         gcm_ex29: '总墓穴数',
            //         gcm_ex30: '已售墓穴数',
            //         gcm_ex31: '可售墓穴数',
            //         gcm_ex3: '联系人',
            //     }
            // ]
            //向地图上删除标注
            map.value.clearOverLays();
            contentObj.carInfos.forEach((item, index) => {
                //创建图片对象
                let icon = new T.Icon({
                    iconUrl: "https://jdzy.tianxunwang.com/rootImg/icon/car2.png",
                    iconSize: new T.Point(30, 27),
                    iconAnchor: new T.Point(10, 25)
                });
                //创建标注对象
                let marker = new T.Marker(new T.LngLat(item.lng, item.lat), {icon});
                
                //向地图上添加标注
                map.value.addOverLay(marker);
                let infoWin1 = new T.InfoWindow();
                
                let sContent =
                    `<div>司机: ${item.user} <br>车牌号码: ${item.name} <br>车牌状态: ${item.status}(${item.carStatus.state}) ` +
                    `</div>`;
                infoWin1.setContent(sContent);
                marker.addEventListener("click", function () {
                    marker.openInfoWindow(infoWin1);
                });// 将标注添加到地图中
            })
            // 设置地图样式
            // map.value.setStyle('indigo')
    }
</script>
<style lang="scss" scoped>
    .home {
        width: 100vw;
        height: 100vh;
        background-image: url('@/assets/bg/bg12.png');
        background-size: 100% 100%;
    }
    .title {
        color: rgb(188, 220, 224);
        font-weight: bold;
        font-size: 30px;
        position: relative;
        .title-span {
            position: absolute;
            font-size: 20px;
            font-weight: normal;
            padding-left: 30px;
            padding-top: 15px;
        }
    }
    .tip {
        text-align: left;
        padding: 1vh 0.5vw;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        :nth-child(1) {
            font-size: 18px;
            font-weight: bold;
        }
    }
    .tip::before{
        content: '';
        background-color: rgb(24 124 183);
        border: 0.2vw solid rgb(24 124 183);
        height: 2.3vh;
        border-radius: 0.2vw;
        margin-right: 0.5vw;
        box-sizing: border-box;
    }
  
    .common-margin {
        padding: 0 1vw;
    }
    .map-box {
        width: 100%;
        //height: 220px;
        height: 88%;
        box-sizing: border-box;
        padding: 0 1vw 0 1vw;
    }
    .mapClass {
        width: 100%;
        height: 100%;
        // height: 260px;
    }
    // 服务特殊人员次数
    .by-bzc-tj {
        display: grid;
        grid-template-columns: repeat(3, 33.3%);
        grid-template-rows: repeat(2, 50%);
        justify-items: center;
        align-items: center;
        font-size: 14px;
        .by-bzc-tj-border {
            width: 85%;
            height: 60%;
            border: 1px solid #fff;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .by-bzc-tj-border-color-1 {
            color: rgb(89, 133, 87);
            box-sizing: border-box;
            border: 1px solid rgb(89, 133, 87);
        }
        .by-bzc-tj-border-color-2 {
            color: rgb(111, 156, 242);
            box-sizing: border-box;
            border: 1px solid rgb(111, 156, 242);
        }
        .by-bzc-tj-border-color-3 {
            color: rgb(114, 124, 256);
            box-sizing: border-box;
            border: 1px solid rgb(114, 124, 256);
        }
        .by-bzc-tj-border-color-4 {
            color: rgb(73, 164, 223);
            box-sizing: border-box;
            border: 1px solid rgb(73, 164, 223);
        }
        .by-bzc-tj-border-color-5 {
            color: rgb(18, 226, 98);
            box-sizing: border-box;
            border: 1px solid rgb(18, 226, 98);
        }
        .by-bzc-tj-border-color-6 {
            color: rgb(162, 154, 199);
            box-sizing: border-box;
            border: 1px solid rgb(162, 154, 199);
        }
    }
    .by-yt-qk {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        .by-yt-qk-text-1 {
            width: 85%;
            padding: 10px;
            box-sizing: border-box; 
            border: 1px solid rgb(179, 185, 206);
            color: rgb(178, 184, 223);
        }
        .by-yt-qk-text-2 {
            width: 85%;
            padding: 10px;
            box-sizing: border-box; 
            color: rgb(146, 180, 173);
        }
        .by-yt-qk-text-3 {
            width: 85%;
            padding: 10px;
            box-sizing: border-box; 
            color: rgb(230, 210, 121);
        }
    }
    .swtj-byfwtj {
        display: flex;
        & > div {
            // width: 33.3%;
            flex: 1;
        }
    }
</style>